<template>
	<view class="goods-cate-wrap">
		<!-- <view class="title">
			<u-icon
				color="#0A0A0C"
				name="arrow-left"
				class="back-icon"
				v-if="activeArr.length !== 0"
				@click="goBack"
			></u-icon>
			<text>{{ titileName }}</text>
		</view> -->
		<view class="content">
			<!-- 第一层 -->
			<view class="list-wrap">
				<template v-if="activeArr.length === 0">
					<view
						class="item"
						v-for="(item, index) in productList"
						@click="firstItemClick(index)"
					>
						<view class="left">
							<image class="icon-wrap" :src="item.icon" />
							<view class="font-wrap">{{ item.translateName }}</view>
						</view>
						<view class="right">
							<u-icon color="#0A0A0C" name="arrow-right"></u-icon>
						</view>
					</view>
				</template>
				<!-- 第二层 -->
				<template v-if="activeArr.length === 1">
					<view
						class="item"
						v-if="activeArr.length === 1"
						v-for="(item, index) in secondList"
						@click="secondItemClick(index)"
					>
						<view class="left">
							<view class="font-wrap">{{ item.translateName }}</view>
						</view>
						<view class="right">
							<u-icon color="#0A0A0C" name="arrow-right"></u-icon>
						</view>
					</view>
				</template>
				<!-- 第三层 -->
				<template v-if="activeArr.length === 2">
					<view
						class="item"
						v-if="activeArr.length === 2"
						v-for="(item, index) in thirdList"
						@click="goGoods(item)"
					>
						<view class="left">
							<view class="font-wrap">{{ item.translateName }}</view>
						</view>
						<view class="right">
							<u-icon color="#0A0A0C" name="arrow-right"></u-icon>
						</view>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>
<script>
import { setThemeColor } from "@/utils/setTheme.js";
import { getCategoryList } from "@/api/store.js";
import { useAppStore } from "@/stores/app";
import { isJSON, mapToLang } from "@/utils/index.js";
const appStore = useAppStore();
export default {
	props: {
		active: {
			type: String,
			default: "0",
		},
	},
	data() {
		return {
			skeletonShow: true, //骨架屏显示隐藏
			navlist: [],
			productList: [
				{ name: "占位占位", child: [{ extra: "" }, { extra: "" }] },
				{ name: "占位占位", child: [{ extra: "" }, { extra: "" }] },
				{ name: "占位占位", child: [{ extra: "" }, { extra: "" }] },
				{ name: "占位占位" },
			],
			number: "",
			height: 0,
			hightArr: [],
			toView: "",
			tabbarH: 0,
			rightDrawer: false,
			navActive: 0,
			paddingRight: 0,
			setThemeColor: setThemeColor(),
			positionList: [],
			isScrollFlag: false,
			activeArr: [],
		};
	},
	computed: {
		getActive() {
			return appStore.navActive;
		},
		locale() {
			return mapToLang(this.$i18n.locale);
		},
		secondList() {
			if (this.activeArr.length === 1) {
				return this.productList[this.activeArr[0]].childList;
			}
			return [];
		},
		thirdList() {
			if (this.activeArr.length === 2) {
				return this.productList[this.activeArr[0]].childList[this.activeArr[1]]
					.childList;
			}
			return [];
		},
		titileName() {
			if (this.activeArr.length === 1) {
				return this.productList[this.activeArr[0]].translateName;
			}
			if (this.activeArr.length === 2) {
				return this.productList[this.activeArr[0]].childList[this.activeArr[1]]
					.translateName;
			}
			return this.$t("page.store.classify");
		},
	},
	watch: {
		locale(val, oldVal) {
			if (val !== oldVal) {
				this.getAllCategory();
			}
			console.log("xxxxlocale");
		},
		getActive: {
			handler(val) {
				setTimeout(() => {
					this.tap(val);
				}, 500);
			},
			immediate: true,
		},
	},
	onPullDownRefresh() {
		uni.stopPullDownRefresh();
	},
	mounted() {
		uni.setNavigationBarTitle({
			title: this.$t(`tabBar.categorTitle`),
		});
		// #ifdef MP-WEIXIN
		this.paddingRight = uni.getMenuButtonBoundingClientRect().width;
		// #endif
		this.getAllCategory();
		//设置商品列表高度
		uni.getSystemInfo({
			success: (res) => {
				this.height =
					res.windowHeight * (750 / res.windowWidth) -
					110 -
					res.statusBarHeight;
			},
		});
	},
	methods: {
		// 下拉刷新
		refresh() {
			console.log("刷新");
			this.getAllCategory();
		},
		open() {
			this.rightDrawer = true;
		},
		closeDrawer(e) {
			this.rightDrawer = false;
			if (!e) {
				this.rightDrawer = false;
			}
		},
		returns() {
			uni.navigateBack();
		},
		search() {
			uni.navigateTo({
				url: "/pages/goods_search/index",
			});
		},
		tap: function (index) {
			console.log("tap", index);
			this.toView = "sv-" + index;
			this.navActive = index;
			this.isScrollFlag = true;
		},
		toTranslateName(list) {
			if (Array.isArray(list)) {
				list.forEach((item) => {
					if (isJSON(item.name)) {
						item.translateName = JSON.parse(item.name)[this.locale];
					} else {
						item.translateName = item.name;
					}
					if (Array.isArray(item.childList)) {
						this.toTranslateName(item.childList);
					}
				});
			}
		},
		getAllCategory() {
			getCategoryList().then((res) => {
				this.toTranslateName(res.data);
				this.productList = res.data;
				this.skeletonShow = false;
			});
		},
		scroll(e) {
			console.log("e", e);
			if (this.isScrollFlag) {
				this.isScrollFlag = false;
				return;
			}
			let top = uni.$u.getPx(e.detail.scrollTop + "px") + 10;
			console.log("positionList", this.positionList);
			for (let i = 0; i < this.positionList.length; i++) {
				if (i == this.positionList.length - 1 && top >= this.positionList[i]) {
					this.navActive = i;
				} else if (
					top >= this.positionList[i] &&
					top < this.positionList[i + 1]
				) {
					console.log(
						"xxx",
						i,
						top,
						this.positionList[i],
						this.positionList[i + 1]
					);
					this.navActive = i;
				}
			}
		},
		searchSubmitValue: function (e) {
			if (this.$util.trim(e.detail.value).length > 0)
				uni.navigateTo({
					url: "/pages/goods_list/index?searchValue=" + e.detail.value,
				});
			else
				return this.$util.Tips({
					title: "请填写要搜索的产品信息",
				});
		},
		firstItemClick(index) {
			this.activeArr.push(index);
			console.log("activeArr", this.productList[this.activeArr[0]]);
		},
		secondItemClick(index) {
			this.activeArr.push(index);
		},
		goBack() {
			this.activeArr.pop();
		},
		goGoods(item) {
			uni.navigateTo({
				url: "/pages/goods_list/index?cid=" + item.id + "&title=" + item.name,
			});
		},
	},
};
</script>
<style scoped lang="scss">
.goods-cate-wrap {
	padding-top: 10rpx;
	.title {
		position: relative;
		height: 88rpx;
		background: #fff;
		font-size: 32rpx;
		font-weight: 500;
		color: #0a0a0c;
		padding: 20rpx 32rpx;
		margin-bottom: 16rpx;
		text-align: center;
		.back-icon {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
		}
	}
	.content {
		.list-wrap {
			padding: 0 24rpx 30rpx;
			background-color: #fff;
			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #d9dfe7;
				padding: 24rpx 16rpx 24rpx 8rpx;

				.left {
					display: flex;
					align-items: center;
					.icon-wrap {
						width: 48rpx;
						height: 48rpx;
						flex-shrink: 0;
					}
					.font-wrap {
						margin-left: 24rpx;
						font-size: 28rpx;
					}
				}
				.right {
					width: 32rpx;
					height: 32rpx;
					// border: 1px blue solid;
				}
			}
		}
	}
}
</style>
